<template>
  <div class="home">
    <div class="search">
      <van-search v-model="value" placeholder="请输入搜索关键词" />
    </div>
    <div class="swipe swipeone">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swipelist1" :key="item.id"
          ><img :src="item.image"
        /></van-swipe-item>
      </van-swipe>
    </div>
    <div class="Letters">
      <p>保百快报</p>
      <van-swipe
        style="height: 20px"
        :autoplay="3000"
        vertical
        :show-indicators="false"
      >
        <van-swipe-item v-for="item in letters" :key="item.id"
          ><p>{{ item.article_title }}</p></van-swipe-item
        >
      </van-swipe>
      <a href="">更多</a>
    </div>
    <div class="swipe swipetwo">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swipelist2" :key="item.id"
          ><img :src="item.image"
        /></van-swipe-item>
      </van-swipe>
    </div>
    <div class="daysweet">
      <img src="http://www.baobai.com/data/upload/mobile/special/s0/s0_07107045043498874.jpg" alt="">
    </div>
    <div class="homelist">
      <div class="homelists" v-for="item in home1" :key="item.id">
      <img :src="item.image">
    </div>
    <div class="homelists" v-for="item in home2" :key="item.id">
      <img :src="item.image">
    </div>
    </div>
    <div class="swipe swipethree">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swipelist3" :key="item.id"
          ><img :src="item.image"
        /></van-swipe-item>
      </van-swipe>
    </div>
  <div class="activite">
    <div class="actlist" v-for="item in home3" :key="item.id">
      <img :src="item.image" alt="">
    </div>
    <div class="actlist" v-for="item in home4" :key="item.id">
      <img :src="item.image" alt="">
    </div>
  </div>
    <div class="july">
      <img src="http://www.baobai.com/data/upload/mobile/special/s0/s0_07113099295257842.gif" alt="">
    </div>
    <div class="summer">
      <div class="sumlist" v-for="item in summer" :key="item.id">
        <img :src="item.image" alt="">
      </div>
    </div>
    <div class="welfare">
      <div class="welflist" v-for="item in welfare" :key="item.id">
        <img :src="item.image" alt="">
      </div>
    </div>
    <div class="hainan">
      <img src="http://www.baobai.com/data/upload/mobile/special/s0/s0_07118814192643066.jpg" alt="">
    </div>
    <div class="goods">
      <div class="goodslist" v-for="item in goodslist" :key="item.id">
        <img :src="item.goods_image" alt="">
        <p>{{item.goods_name}}</p>
        <span>￥{{item.goods_promotion_price}}元</span>
        <del>￥{{item.goods_price}}</del>
      </div>
    </div>
  </div>
</template>

<script>
import { getIndexdata } from "../service/api";

export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      value:"",
      swipelist1: [],
      swipelist2: [],
      letters: [],
      home1:[],
      home2:[],
      swipelist3:[],
      home3:[],
      home4:[],
      summer:[],
      welfare:[],
      goodslist:[]
    };
  },
  created() {
    ``;
    getIndexdata().then((res) => {
      this.swipelist1 = res.datas[0].adv_list.item;
      this.letters = res.datas[1].adv_list3.item;
      this.swipelist2 = res.datas[2].adv_list2.item;
      this.home1= res.datas[3].home7.item;
      this.home2= res.datas[4].home7.item;
      this.swipelist3 = res.datas[5].adv_list2.item;
      this.home3= res.datas[6].home5.item;
      this.home4= res.datas[7].home5.item;
      this.summer = res.datas[9].home6.item;
      this.welfare= res.datas[10].home5.item;
      this.goodslist = res.datas[12].goods.item
    });
  },
};
</script>
<style scoped lang="scss">
.home{
  padding-bottom: 100px;
  background: #f0f0f0
}
.swipe {
  width: 100%;
  img {
    width: 100%;
  }
}
.Letters {
  width: 100%;
  display: flex;
  height: 40px;
  font-size: 12px;
  padding: 10px;

  box-sizing: border-box;
  .van-swipe {
    flex: 1;
    text-align: left;
    p {
      color: blue;
    }
  }
  p {
    margin: 0;
    padding: 0;
    padding-right: 15px;
    color: red;
  }
  a {
    color: blue;
  }
}
.daysweet{
  width: 100%;
  img{
    width: 100%;
  }
}
.homelist{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  .homelists{
    width: 20%;
    img{
      width: 100%;
    }
  }
}
.activite{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  .actlist{
    width: 25%;
    img{
      width: 100%;
    }
  }
}
.july{
  width: 100%;
  img{
    width: 100%;
    display: block;
  }
}
.summer{
  display: flex;
  width: 100%;
  .sumlist{
    width: 33%;
    img{
      width: 100%;
      display: block;
    }
  }
}
.welfare{
  width: 100%;
  display: flex;
  .welflist{
    width: 25%;
    img{
      width: 100%;
      display: block;
    }
  }
}
.hainan{
  width: 100%;
  img{
    width: 100%;
    display: block;
  }
}
.goods{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
 .goodslist{
   width: 46%;
   margin-left: 10px;
   font-size: 15px;
   background: white;
   margin-bottom: 5px;
   text-align: left;
   padding-left: 5px;
   img{
     width: 100%;
   }
   p{
     height: 40px;
   }
   span{
     color: red;
   }
   del{
     font-size: 10px;
     color: #999
   }
 }
}
</style>
 